<style lang='less' scoped>
  @import '~style/filter.less';

</style>

<template>
  <div>
    <div class="filterForm">
      <div class="filterContBox">
      <div class="filterContBox">
        <div class="filterLabel ">用户账号</div>
        <el-input
        	size="small"
          v-model="filterObj.phone"
          placeholder="请输入用户账号"
          class="filterInput"
        ></el-input>
      </div>
      <div class="filterContBox">
        <div class="filterLabel">产品名称</div>
        <el-input
        	size="small"
          v-model="filterObj.productName"
          placeholder="请输入产品名称"
          class="filterInput"
        ></el-input>
      </div>
        <div class="filterContBox">
          <span class="filterLabel">预约时间</span>
          <el-date-picker
        	  size="small"
            v-model="createionTimeArr"
            @change="setDaterange"
            type="daterange"
            placeholder="选择日期范围" class="filterDatePick">
          </el-date-picker>
        </div>
        <div class="filterContBox">
          <div class="filterLabel">预约编号</div>
          <el-input
            v-model="filterObj.recordNo"
        	  size="small"
            placeholder="请输入预约编号"
            class="filterInput"
          ></el-input>
        </div>
        <div class="filterContBox">
          <div class="filterLabel">是否IFA</div>
          <el-select
            clearable
          	size="small"
            class="filterInput"
            v-model="filterObj.ifa"
            placeholder="全部">
            <el-option label="全部" value=""></el-option>
            <el-option label="是" value="YES"></el-option>
            <el-option label="否" value="NO"></el-option>
          </el-select>
        </div>


        <div class="filterContBox">
          <div class="filterLabel">是否已分配理财师</div>
          <el-select
          	size="small"
            clearable
            class="filterInput"
            v-model="filterObj.distributionFinancial"
            placeholder="全部">
            <el-option label="全部" value=""></el-option>
            <el-option label="是" value="YES"></el-option>
            <el-option label="否" value="NO"></el-option>
          </el-select>
        </div>
        <div class="filterContBox">
          <div class="filterLabel">状态</div>
          <el-select
          	size="small"
            clearable
            class="filterInput"
            v-model="filterObj.status"
            placeholder="全部">
            <el-option label="全部" value=""></el-option>
            <el-option
              v-for="item in reservationRecordType"
              :key="item.name"
              :label="item.value"
              :value="item.name">
            </el-option>
          </el-select>
        </div>
        <div class="filterButton">
          <el-button class="btn" @click='exportExcel()'
                    v-if='getButtonConfig && getButtonConfig.appointmentListExport' >
            导出excel
          </el-button>
          <el-button type="warning" class="btn" @click='getList()'>查询</el-button>
        </div>
      </div>
    </div>
  </div>
</template>


<script>
  import { mapGetters } from 'vuex'

  export default {
    props:['getButtonConfig','reservationRecordType'],
    components:{
    },
    data(){
      return{
        filterObj:{
          userId:sessionStorage.getItem('HKid'),
          productName:'',
          recordNo:'',
          phone:'',
          dateStart:'',
          dateEnd:'',
          ifa:'',
          distributionFinancial:'',
          status:'',
        },
        createionTimeArr:null,//选择的创建起止时间
      }
    },
    methods:{
      async getList(){
        console.log('fire with params: ', this.filterObj);
        this.$emit('setFilterParams', this.filterObj)
      },
      async exportExcel(){
        console.log('export with params: ', this.filterObj);
        this.$emit('exportExcel', this.filterObj)
      },

      setDaterange(val){
        // console.log(val)
        let startTime =  val ? val.slice(0,10)+ ' 00:00:00' :'',
          endTime = val ? val.slice(13, val.length) + ' 23:59:59' : '';
        this.filterObj.dateStart = startTime;
        this.filterObj.dateEnd = endTime;
      },

      goPage(name, parm={}, query={}){
        console.log(name)
        this.$router.push({
          name: name,
          params:parm,
          query:query,
        })
      },
    },
    created(){

    },
    mounted(){

    },
  }
</script>
